<template>
  <div class="myCollectionContainer">
    <h3 class="mycollection">我收藏的职位</h3>
    <el-card>
      <div class="oneClock" v-show="tableData.length > 0">
        <div>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
          </el-checkbox>
          <span class="oneApply" @click="Apply">一键申请</span>
          <span class="oneApply del" @click="delAll">删除</span>
        </div>
      </div>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" v-for="(item, index) in tableData"
        :key="index">
        <div class="list">
          <div class="leftContent">
            <el-checkbox :label="item" :key="index" class="checkbox"><span></span></el-checkbox>
            <div class="info">
              <div class="name" @click="enterDetailsPage(item)">{{item.name}}</div>
              <div class="ageAdress">
                <span class="salary">{{item.wageText}}</span>
                <p class="area">
                  <span class="prev-line">{{item.workAreaText || '地区不限'}}</span>
                  <span class="prev-line">{{item.workExpText || '经验不限'}}</span>
                  <span class="prev-line">{{item.educationText ||'学历不限'}}</span>
                </p>
              </div>
              <div class="tag-group">
                <el-tag v-for="(allure,keyIndex) in item.allureText.slice(0, 5)" :key="keyIndex" type="info"
                  effect="plain">
                  {{ allure }}
                </el-tag>
              </div>
            </div>

          </div>
          <div class="rightContent">
            <div class="compaName">
              <div class="info">
                <div class="name" @click="companyInfoDetailsPage(item)">
                  {{item.companyInfo ? item.companyInfo.name : '暂无'}}</div>
                <div class="compaNameageAdress">
                  <p class="area">
                    <span class="prev-line">{{item.natureText}}</span>
                    <span class="prev-line">{{item.companyInfo ? item.companyInfo.scaleText : '暂无'}}</span>
                  </p>
                </div>
                <div>
                </div>
              </div>
            </div>
            <div class="companyLogo">
              <div class="logo">
                <img :src="((item.companyInfo && item.companyInfo.logo) || require('../../../assets/img/qiye.png'))"
                  alt="">
              </div>
              <span class="oneApplyTwo delTwo" v-on:click.stop="deleteId(item.id)">删除</span>
              <span class="oneApplyTwo" v-if="item.status == 1" @click.stop="oneDeliverSaveDialog(item)">一键申请</span>
              <span class="oneApplyTwo Offline" v-if="item.status == 3 || item.status == 2">已下线</span>
            </div>
          </div>
        </div>
      </el-checkbox-group>
      <el-card class="noData" v-show="tableData.length<=0">
        暂无数据
      </el-card>
    </el-card>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size="query.size"
        @current-change="currentChange">
      </el-pagination>
    </div>
    <!-- 选择 简历弹框 -->
    <el-dialog width="30%" class="elDialog" :visible.sync="innerVisible" :append-to-body="false" @close="closeResume">
      <p slot="title" class="dialogHeader">
        <span>请选择投递的简历</span>
      </p>
      <el-col :span="24">
        <div>
          <el-select v-model="resumeValue" placeholder="请选择" popper-class="popper-class" @change="changeResume">
            <el-option v-for="item in resumelist" :key="item.id" :label="item.title" :value="item.id">
            </el-option>
          </el-select>
          <div class="checkouts">
            <el-checkbox v-model="resumeChecked">将该份简历设置为快速投递(推荐)</el-checkbox>
          </div>
        </div>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deliverSave_determine" v-if="!isAll">立即投递</el-button>
        <el-button type="primary" @click="allDeliverSave" v-else>立即投递</el-button>
      </div>
    </el-dialog>
    <!-- feat:该岗位为樟树市人才服务代招职位，如需投递请联系招聘负责人。 -->
    <el-dialog class="elDialog jonDz" :visible.sync="isJobType" width="30%" style="margin-top:15vh"
      :before-close="closeResume">
      <p slot="title" class="dialogHeader">
        <span>申请职位</span>
      </p>
      <p class="jobItem">该岗位为樟树市人才服务代招职位，如需投递请联系招聘负责人。</p>
      <p class="jobItem">联系人：{{companyInfo.contact || '暂无'}}</p>
      <p class="jobItem">联系电话：{{companyInfo.phone || '暂无'}}</p>
      <p class="jobItem">座机：{{companyInfo.tel || '暂无'}}</p>
      <p class="jobItem">联系邮箱：{{companyInfo.mail || '暂无'}}</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeResume">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listPage, deleteId, deliverSave, gitInterface, updateExpress } from '../../../api/Mycollection';
export default {
  name: 'Recommend',
  data () {
    return {
      ENV: process.env,
      // 是都全部申请
      isAll: false,
      // 简历列表
      resumelist: [],
      //  选中简历
      resumeValue: '',
      // 简历id
      resumeId: '',
      // 将该份简历设置为快速投递
      resumeChecked: false,
      // 简历弹框 隐藏显示 开关
      outerVisible: false,
      innerVisible: false,
      checkAll: false,
      checkedCities: [],
      tableData: [],
      isIndeterminate: false,
      items: [
        { type: '', label: '节日福利' },
        { type: 'success', label: '节日福利' },
        { type: 'info', label: '节日福利' },
        { type: 'danger', label: '节日福利' }
      ],
      query: {
        arr: [
          {
            column: 'j_job_favorite_id',
            type: '',
            value: localStorage.getItem('ps_userId')
          },
          { "column": "include", "type": "", "value": "D,CI" }
        ],
        sort: '',
        page: 1,
        size: 10
      },
      total: 1,
      // feat： 待招职位弹框
      isJobType: false,
      // 公司信息
      companyInfo: {}
    };
  },
  mounted () {
    this.listPage()
  },
  methods: {
    handleCheckAllChange (val) {
      console.log(val, '全选is')
      this.checkedCities = val ? this.tableData : [];
      this.isIndeterminate = false;
    },
    // 选中
    handleCheckedCitiesChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
      this.checkedCities = value
      console.log(this.checkedCities, 'this.checkedCities ')
    },
    // 查询我的收藏 接口请求
    listPage () {
      //开启loading
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      var formData = new FormData()
      formData.append('page', this.query.page)
      formData.append('size', this.query.size)
      formData.append('condition', JSON.stringify(this.query.arr))
      listPage(formData).then((res) => {
        if (res.success) {
          loading.close();
          console.log(res.data.records || [], '我的收藏列表')
          let datas = res.data.records || []
          if (datas) {
            datas.map((item) => {
              if (item.allureText) {
                item.allureText = item.allureText.split(',')
              }
            })
          }
          this.tableData = res.data.records || [];
          // this.tableData = [];
          this.total = res.data.total
        } else {
          loading.close();
          this.$message.error(res.msg)
        }
      })
    },
    // 分页
    currentChange (val) {
      this.query.page = val
      this.listPage()
    },
    // 删除单个
    deleteId (id) {
      this.$confirm('您要删除吗，删除后不可恢复，是否确定操作？', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'message-logout',
        title: '系统提醒'
      }).then(() => {
        console.log('删除id', id)
        var formData = new FormData()
        formData.append('jobId', id)
        formData.append('userId', localStorage.getItem('ps_userId'))
        deleteId(formData).then((res) => {
          if (res.success) {
            // this.$message({
            //   message: '删除成功',
            //   type: 'success'
            // });
            this.listPage()
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'success',
        //   message: '取消'
        // });
      });
    },
    // 删除多个
    delAll () {
      if (this.checkedCities.length == 0) {
        this.$message.error('请选择您要删除的职位')
        return false;
      }
      this.$confirm('您要删除吗，删除后不可恢复，是否确定操作？', '', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        customClass: 'message-logout',
        title: '系统提醒'
      }).then(() => {
        let idArr = []
        let that = this
        that.checkedCities.map((item) => {
          idArr.push(item.id)
        })
        var formData = new FormData()
        formData.append('jobId', idArr.join(','))
        formData.append('userId', localStorage.getItem('ps_userId'))
        deleteId(formData).then((res) => {
          if (res.success) {
            // that.$message({
            //   message: '删除成功',
            //   type: 'success'
            // });
            that.listPage()
            that.isIndeterminate = false
          } else {
            that.$message.error(res.msg)
            that.isIndeterminate = false
          }
        })
      }).catch(() => {
        // this.$message({
        //   type: 'success',
        //   message: '取消'
        // });
      });
    },
    // 单个一键申请
    deliverSave (item) {
      let that = this
      let idArr = [
        {
          jobId: item.id,
          companyId: item.companyId
        }
      ]
      // that.checkedCities.map((item) => {
      //   idArr.push({
      //     jobId: item.jobId,
      //     companyId: item.companyId
      //   })
      // })
      // var formData = new FormData()
      // formData.append('dataJson', JSON.stringify(idArr))
      // formData.append('userId', localStorage.getItem('ps_userId'))
      // feat: 后端改了传参格式
      let formData = {
        "resumeId": this.resumeId,
        "dataJson": idArr
      }
      deliverSave(formData).then((res) => {
        if (res.success) {
          // let datas = res.data
          that.$message({
            message: '申请成功',
            type: 'success'
          });
          that.isIndeterminate = false
          that.checkAll = false
        } else {
          that.$message.error(res.msg)
          that.checkAll = false
          that.isIndeterminate = false
        }
      })
    },
    // 一键申请全部
    // Apply () {
    //   let that = this
    //   let idArr = []
    //   if (that.checkedCities.length <= 0) {
    //     this.$message.error('请选择')
    //     return false
    //   }
    //   that.checkedCities.map((item) => {
    //     idArr.push({
    //       jobId: item.id,
    //       companyId: item.companyId
    //     })
    //   })
    //   var formData = new FormData()
    //   formData.append('dataJson', JSON.stringify(idArr))
    //   formData.append('userId', localStorage.getItem('ps_userId'))
    //   deliverSave(formData).then((res) => {
    //     if (res.success) {
    //       // let datas = res.data
    //       that.$message({
    //         message: '申请成功',
    //         type: 'success'
    //       });
    //       that.checkedCities = []
    //       that.isIndeterminate = false
    //       that.checkAll = false
    //     } else {
    //       that.isIndeterminate = false
    //       that.checkedCities = []
    //       that.checkAll = false
    //       that.$message.error(res.msg)
    //     }
    //   })
    // }
    // 一键申请弹框 选择简历
    deliverSave (val) {
      if (!localStorage.getItem('ps_Authorization')) {
        this.$message.error('您还没有登录，请先进行登录');
        return false;
      }
      // 查询简历列表
      gitInterface().then((res) => {
        if (res.success) {
          this.resumelist = res.data;
          let isFlag = false;  // 定义一个快关变量
          res.data.map(item => {
            if (item.express) {
              isFlag = true;
              this.resumeId = item.id;
            }
          })
          if (isFlag) { // 快速投递
            // 立即申请
            this.applyNow()
          } else { // 选择简历弹框显示
            this.innerVisible = true;
          }
          // res.data.map((item) => {
          //   if (item.express) {
          //     this.resumeValue = item.title
          //     this.resumeId = item.id
          //     this.resumeChecked = true
          //   }
          // })
          // this.resumelist = res.data
          // this.innerVisible = true
          console.log(res, '简历列表')
        } else {
          console.log('错误')
        }
      })
    },
    // 立即申请【多选】
    applyNow () {
      console.log(this.checkedCities, '选中的职位')
      let that = this;
      let idArr = [];
      this.checkedCities.map(item => {
        idArr.push({
          jobId: item.id,
          companyId: item.companyId
        })
      })
      let formData = {
        "resumeId": this.resumeId,
        "dataJson": idArr
      }
      deliverSave(formData).then(res => {
        console.log(res, '直接投递')
        if (res.success) {
          this.$message.success('投递成功!');
          this.innerVisible = false;
          this.checkedCities = [];
          this.isIndeterminate = false;
          setTimeout(() => {
            window.open(that.url + `/#/resumeDeliveredSuccess`, `_blank`)
          }, 500)
        } else {
          this.$message.error(`${res.msg}`)
          this.checkedCities = [];
          this.isIndeterminate = false;
        }
      })
    },
    changeResume (val) {
      this.resumeId = val
    },
    // 关闭弹框
    closeResume () {
      this.resumeValue = ''
      this.resumeId = ''
      this.resumeChecked = false;
      // feat ：关闭
      this.isJobType = false
    },
    // 一键你申请单个
    deliverSave_determine () {
      if (!this.resumeValue) {
        this.$message.error('请选择简历')
        return false
      }
      let item = this.resume
      let that = this
      let idArr = [
        {
          jobId: item.id,
          companyId: item.companyId
        }
      ]
      // that.checkedCities.map((item) => {
      //   idArr.push({
      //     jobId: item.jobId,
      //     companyId: item.companyId
      //   })
      // })
      // var formData = new FormData()
      // formData.append('dataJson', JSON.stringify(idArr))
      // formData.append('userId', localStorage.getItem('ps_userId'))
      // formData.append('resumeId', this.resumeId)
      // feat: 后端改了传参格式
      let formData = {
        "resumeId": this.resumeId,
        "dataJson": idArr
      }
      deliverSave(formData).then((res) => {
        if (res.success) {
          // this.$message({
          //   message: '投递成功',
          //   type: 'success'
          // });
          this.innerVisible = false;
          if (this.resumeChecked) {
            //  调用是否默认简历头覅
            this.updateExpress()
          } else {
            this.resumeValue = '';
          }
          window.open(this.url + `/#/resumeDeliveredSuccess?category=${this.companyInfo.category}`, `_blank`)

        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 是否默认设置为此建立为快速投递投递简历
    updateExpress () {
      let obj = {
        express: this.resumeChecked,
        id: this.resumeId
      }
      updateExpress(obj).then((res) => {
        if (res.success) {
          this.innerVisible = false
          // this.$router.push('/resumeDeliveredSuccess')
          console.log('设置未默认简历成功')
          // window.open(this.url + '/#/resumeDeliveredSuccess', '_blank')
        }
      })
    },
    // 一键申请【全部按钮】
    Apply () {
      if (this.checkedCities.length == 0) {
        this.$message.error('请选择申请的职位')
        return false;
      }
      this.isAll = true
      this.deliverSave()
    },
    // 一键申请【单个按钮】
    oneDeliverSaveDialog (val) {
      console.log(val, '每份职位item')
      if (!localStorage.getItem('ps_Authorization')) {
        this.$message.error('您还没有登录，请先进行登录');
        return false;
      }
      // feat: 该岗位为樟树市人才服务代招职位
      this.companyInfo = val
      if (val.jobType == 1) {
        this.isJobType = true
      } else {
        this.isAll = false
        // 查看简历
        gitInterface().then(res => {
          if (res.success) {
            let data = res.data;
            // 简历容器
            this.resumelist = res.data;
            let isFlag = false; // 设置变量开关 如果有默认简历 则为true 没有则为false
            data.map(item => {
              // 如果是快速投递的则直接投递并进入聊天页面，不是快速投递的则弹框显示
              if (item.express) {  // 快速投递
                isFlag = true;
                this.resumeId = item.id; // 获取简历id
                return false;
              }
            })
            if (isFlag) { // 有设置默认投递，则直接申请，不显示弹框, 如果没有默认设置则点击投递操作的时候就需要求职者选择一份自己的简历投递
              // 立即申请职位
              this.oneApply();
            } else {
              this.innerVisible = true;
            }
          } else {
            this.$message.error(`${res.msg}`)
          }
        })
        // this.deliverSave()
        if (val) {
          this.resume = val
        }
      }
    },
    oneApply () {
      let idArr = [];
      idArr.push({
        jobId: this.companyInfo.id,
        companyId: this.companyInfo.companyId
      })
      let formData = {
        "resumeId": this.resumeId,
        "dataJson": idArr
      }
      deliverSave(formData).then((res) => {
        if (res.success) {
          this.$message.success('投递成功!');
          window.open(this.url + `/#/resumeDeliveredSuccess?category=${this.companyInfo.category}`, `_blank`)
        } else {
          this.$message.error(res.msg)
        }
      })

    },
    // 一键申请 全部
    allDeliverSave () {
      if (!this.resumeValue) {
        this.$message.error('请选择简历')
        return false
      }
      let that = this
      let idArr = []
      that.checkedCities.map((item) => {
        idArr.push({
          jobId: item.id,
          companyId: item.companyId
        })
      })
      // var formData = new FormData()
      // formData.append('dataJson', JSON.stringify(idArr))
      // formData.append('userId', localStorage.getItem('ps_userId'))
      // formData.append('resumeId', this.resumeId)
      // feat： 后端更改了传递的参数格式
      let formData = {
        "resumeId": this.resumeId,
        "dataJson": idArr
      }
      deliverSave(formData).then((res) => {
        if (res.success) {
          that.$message({
            message: '申请成功',
            type: 'success'
          });
          if (that.resumeChecked) {
            that.updateExpress()
          } else {
            that.resumeValue = '';
          }
          that.innerVisible = false;
          that.checkedCities = []
          that.checkAll = false;
          that.isIndeterminate = false
          setTimeout(() => {
            window.open(that.url + `/#/resumeDeliveredSuccess`, `_blank`)
          }, 500)
        } else {
          that.$message.error(res.msg)
          that.checkedCities = []
          that.checkAll = false;
          that.isIndeterminate = false;
        }
      })
    },
    // 进入职位详情页
    enterDetailsPage (item) {
      window.open(this.url + '/#/JobHunting/jobdetail?id=' + item.id + '&category=' + item.category, '_blank')
    },
    // 进入主站中的公司详情页
    companyInfoDetailsPage (item) {
      window.open(this.url + '/#/Popularenterprises?companyId=' + item.companyId, '_blank')
    }
  },
  created () {
    // 获取默认路径
    this.url = process.env.BASE_URL;
  }
}
</script>

<style lang="css" scoped>
.myCollectionContainer {
    background-color: white;
    padding: 15px 20px 0 20px;
    box-sizing: border-box;
}
.myCollectionContainer .mycollection {
    color: #222222;
    font-size: 16px;
}
.oneClock {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.oneApply {
    width: 94px;
    height: 24px;
    background: #1893fc;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    margin-left: 35px;
    display: inline-block;
    cursor: pointer;
    color: white;
}
.del {
    background-color: white;
    border: 1px solid #1893fc;
    color: #1893fc;
    margin-left: 24px;
}
.describe {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
}
.change {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    color: rgba(85, 85, 85, 1);
    cursor: pointer;
}

.list {
    height: 140px;
    border: 2px solid #f8f8f8;
    margin-top: 8px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
}
.list:hover {
    background-color: #f8f8f8;
}
.leftContent {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    padding-right: 0.5%;
    box-sizing: border-box;
}
.leftContent .checkbox {
    margin-top: 3px;
}

.rightContent {
    flex: 1;
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-left: 0.5%;
    box-sizing: border-box;
    position: relative;
}

.ageAdress {
    display: flex;
    justify-content: flex-start;
    height: 60px;
    align-items: center;
}

.salary {
    height: 38px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    white-space: nowrap;
    color: rgba(253, 78, 64, 1);
}
.area {
    height: 38px;
    margin-left: 35px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(85, 85, 85, 1);
}
.area .prev-line:not(:first-child)::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    margin: -2px 10px 0;
    background-color: #707070;
}
.compaNameageAdress {
    height: 60px;
}
.compaNameageAdress .area {
    height: 50px;
    margin-left: 0px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 50px;
    color: rgba(85, 85, 85, 1);
}
.leftContent .info {
    width: calc(100% - 24px);
    /* display: flex;
    flex-direction: column;
    justify-content: space-between; */
}
.info .name {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    cursor: pointer;
    display: inline-block;
}
.tag-group {
    display: inline-block;
    height: 25px;
    overflow: hidden;
    line-height: 20px;
    margin-bottom: 1px;
}
.tag-group .el-tag--plain.el-tag--info {
    margin-right: 10px;
}

.rightContent .compaName {
    /* width: 200px; */
    height: 100%;
}

.rightContent .companyLogo {
    width: 94px;
    height: 100%;
}
.companyLogo .logo {
    width: 68px;
    height: 68px;
    position: absolute;
    right: 0;
    background: rgba(242, 242, 242, 1);
    opacity: 1;
    border-radius: 6px;
}
.companyLogo .logo img {
    width: 100%;
    height: 100%;
}
.Collection {
    width: 100%;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 50px;
    text-align: right;
    cursor: pointer;
    color: rgba(85, 85, 85, 1);
}
.oneApplyTwo {
    width: 78px;
    height: 24px;
    background: #1893fc;
    color: #ffffff;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    display: inline-block;
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
}
.Offline {
    background-color: #cccccc;
    cursor: default;
}
.delTwo {
    background: #ffffff;
    border: 1px solid #1893fc;
    color: #1893fc;
    right: 110px;
}
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 124px;
    text-align: center;
    background: #ffffff;
}
.name a {
    font-size: 20px;
    color: #222222;
}

/* 弹框 */
.checkouts /deep/ .el-checkbox {
    height: 60px;
    line-height: 60px;
}
</style>
<style>
.message-logout {
    width: 20%;
}
.message-logout .el-message-box__btns {
    text-align: center !important;
}
.message-logout .el-message-box__btns button {
    width: 100px;
}
.message-logout .el-message-box__header {
    padding: 17px 15px 10px;
}
.message-logout .el-message-box__header .el-message-box__title {
    font-size: 14px;
}
.message-logout .el-message-box__content {
    border-top: 2px solid rgba(0, 147, 255, 1);
}
.message-logout .el-message-box__headerbtn .el-message-box__close {
    color: #1893fc;
}
.noData {
    width: 100%;
    height: 50px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    margin-top: 20px;
}
.jonDz /deep/ .el-dialog__header {
    border-bottom: 1px solid #e5e5e5;
}
.jonDz /deep/ .el-dialog__footer {
    padding: 40px 20px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.jobItem {
    margin-bottom: 10px;
}
</style>